<template>
    <view-box style="background:#fff;">
        <div style="height:15px;background:#fff;"></div>
        <div class=" myapply-ciong" >
            <div class="a-click" >
            <p style="width:100%;font-weight: 600;line-height:35px;word-wrap: break-word;">{{Position.title}}</p>
               <div class="cong-coplj">
                <div class="kshi-cop">
                    <div class="kshi-cop-cong" style="width:70px;">
                        <p style="margin-right:5px;" v-if="Position.user"><img :src="Position.user.avatar" alt=""></p>
                    </div>
                    <div class="kshi-cop-cong1">
                        <p style="font-size:14px;color:#bababa;width:100%;" v-if="Position.user">{{Position.user.name}}</p>
                        <p style="font-size:12px;color:#bababa;width:100%;">{{Position.created_at}}</p>
                    </div>
                </div>
                <div class="item-coplj"> 
                     <p style="width:50%;color:#32B6C6;" v-if="Position.is_zan !== 0">
                        <i slot="icon" class="iconfont icon-dianzanmianxing"></i>
                        <span>{{Position.zan_num}}</span>
                    </p>
                    <p style="width:50%;color:#bababa;" v-if="Position.is_zan === 0" @click="zan(Position.id)">
                        <i slot="icon" class="iconfont icon-dianzan"></i>
                        <span>{{Position.zan_num}}</span>
                    </p>
                    <p style="width:50%;color:#bababa;"  @click="$router.push('/comments?pldi=' + Position.id + '&&uid=' + Position.user.id)">
                    <i slot="icon" class="iconfont icon-pinglun1"></i>
                    <span>{{Position.comment_num}}</span>
                    </p>
                </div>
                
                </div>
            </div>
            <div class="bor-okjh">
                <p style="width:92%;margin-left:4%;color:#bababa;font-size:14px;">
               {{Position.content}}
                </p>
            </div>
        </div>
        <div class="border-bottom-partic" v-for="(item, index) in Position.comment" :key="index">
            <div class="kshi-cop" style="width:100%;">
                <div class="kshi-cop-cong">
                    <p><img :src="item.user_info.avatar" alt=""></p>
                </div>
                <div class="kshi-cop-cong1">
                    <p style="font-size:14px;width:100%;">
                        <span>{{item.user_info.name}}</span>
                        <span style="color:#bababa;">{{item.created_at}}</span>
                    </p>
                    <p style="font-size:12px;width:100%;">{{item.comment}}</p>
                </div>
            </div>
        </div>
    </view-box>
</template>

<script>
import { ViewBox, Box, Tab, TabItem, Swiper, SwiperItem, Flexbox, FlexboxItem } from 'vux'
export default {
  components: {
    ViewBox,
    Box,
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    Flexbox,
    FlexboxItem
  },
  data () {
    return {
      Position: {}
    }
  },
  mounted () {
    this.details()
  },
  methods: {
    details () {
      console.log(this.rid)
      this.$http.get('/forumPosts/' + parseInt(this.$route.query.uidi)).then(response => {
        this.Position = response.data
        console.log(response.data)
      }).catch(error => {
        console.log(error)
      })
    },
    zan (id) {
      this.$http.post('/forum/zan', {
        post_id: id
      }).then(response => {
        // this.myPrivac()
        this.reload()
        // console.log(response)
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
  .button-o1{
    background: #fff;
    height: 40px;
    width: 50%;
    border-radius: 0px;
    color: #6D7BFE;
    border:1px solid #6D7BFE;

}
.button-o2{
    background: #6D7BFE;
    height: 40px;
    width: 50%;
    border-radius: 0px;
    color:#fff;
    border:1px solid #6D7BFE;
    
}
.postforum{
    width:100%;
    position: fixed;
    bottom: 0px;
    left:0px;
    display: flex;
}
.back-quer{
    width:94%;
    margin-left: 3%;
    background:#E5E5E5;
    border-radius: 8px;
    
}
.p-ljhg{
    width: 25%;
}
.p-ljhg img{
    width: 40px;
    height: 40px;
    border-radius: 100%;
}
.p-ljhg1{
    width: 75%;
}
.comh-pouii{
    width: 100%;
    display: flex
}
.plyt-cong{
    width: 100%;
    display: flex;
}
.cong-coplj{
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.kshi-cop-cong{
    width: 25%;
}
.kshi-cop-cong img{
    width: 60px;
    height: 60px;
    border-radius: 100%;
    margin: 10%;
}
.kshi-cop-cong1{
    width: 75%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.kshi-cop{
    width: 70%;
    display: flex;
}
.item-coplj{
    width: 30%;
    display: flex;
    align-items: flex-end;
}
    .vux-slider {
        height: 100%;
    }
    .myapplyForther{
        width: 100%;
        height: 79px;
        display:flex;
        background: #000;
    }
    .myapplyForther p{
        width: 100%;
        height: 79px; 
        line-height: 43.2px;
    }
    .myapplyForther span{
        font-size:27.49px;
        color: #fff;
    }
    .myapply-ciong{
        width: 100%;
        background: #fff;
        height: auto;
        /* display: flex; */
    }
    .myapply-ciong p{
        width: 50%;
        flex-wrap: wrap;
        line-height: 30px;
    }
    .myapply-span1{
        font-size: 15px;
        color:#333333;
        width: 100%;
        display:inline-block
    }
    .myapply-span2{
        width: 100%;
        font-size: 18.499px;
        color:#fe0001;
        display:inline-block
    }
    .myapply-span3{
        width: 100%;
        font-size:14px;
        color: #999999;
        display:inline-block
    }
    .img-ifo{
        width: 30%;
    }
    .img-ifo img{
        width: 60px;
        height: 60px;
        border-radius: 100%;
        padding: 20%;
    }
    .text-ifociuson{
        width: 70%;
        display: grid;
        align-items: center;
    }
    .fong-cpo{
      position: absolute;
      top: 0px;
      left: 0px;
    }
    .a-click{
      width: 92%;
      border-bottom: 1px solid #f4f4f4;
      margin-left: 4%;
    }
    .backgr-border{
        width: 100%;
        position: fixed;
        bottom: 0px;
        left: 0px;
        z-index: 123;
    }
    .border-rolo{
      width: 50px;
      height: 50px;
      background: #fff;
      border-radius: 100%;
      box-shadow: 0px 0.3px 4px 0.4px #09555E;
      text-align: center;
      line-height: 50px;
      color: #8AB0B4;
      margin: 0 auto;
      margin-bottom: 10px;
    }
    .bor-okjh{
        width: 100%;
        border-bottom: 1px solid #f4f4f4;
    }
    .border-bottom-partic{
        width: 92%;
        margin-left: 4%;
        border-bottom: 1px solid #f4f4f4;
    }
</style>